<template>
  <view class="template-feedback">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
        <text class='icon tn-icon-left'></text>
      </view>
    </tn-nav-bar>
    
    <view class="feedback-content" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 问题类型选择 -->
      <view class="section-title">
        <text class="tn-icon-feedback tn-padding-right-sm"></text>
        <text>问题类型</text>
      </view>
      
      <view class="type-grid">
        <view 
          class="type-item" 
          v-for="(item, index) in feedbackTypes" 
          :key="index"
          :class="{'active': selectedType === index}"
          @click="selectType(index)"
        >
          <text class="type-text">{{item}}</text>
        </view>
      </view>

      <!-- 问题描述 -->
      <view class="section-title tn-margin-top">
        <text class="tn-icon-edit tn-padding-right-sm"></text>
        <text>问题描述</text>
      </view>
      
      <view class="input-area">
        <textarea 
          class="feedback-textarea"
          v-model="content"
          placeholder="请详细描述您遇到的问题，以便我们更好地为您解决..."
          :maxlength="500"
          show-confirm-bar="false"
        ></textarea>
        <view class="word-count">{{content.length}}/500</view>
      </view>

      <!-- 图片上传 -->
      <view class="section-title tn-margin-top">
        <text class="tn-icon-image tn-padding-right-sm"></text>
        <text>上传截图（选填）</text>
      </view>
      
      <view class="upload-area">
        <view class="image-grid">
          <view 
            class="image-item" 
            v-for="(image, index) in images" 
            :key="index"
          >
            <image :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @click="deleteImage(index)">
              <text class="tn-icon-close"></text>
            </view>
          </view>
          <view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
            <text class="tn-icon-add"></text>
          </view>
        </view>
        <view class="tip-text">最多上传3张图片</view>
      </view>

      <!-- 联系方式 -->
      <view class="section-title tn-margin-top">
        <text class="tn-icon-mobile tn-padding-right-sm"></text>
        <text>联系方式（选填）</text>
      </view>
      
      <input 
        class="contact-input"
        v-model="contact"
        placeholder="请留下您的手机号或微信，方便我们联系您"
      />

      <!-- 提交按钮 -->
      <view class="submit-btn-wrap">
        <button class="submit-btn tn-cool-bg-color-1" @click="submitFeedback">
          提交反馈
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Feedback',
  data() {
    return {
      feedbackTypes: [
        '商品质量',
        '售后服务',
        '功能建议',
        '系统故障',
        '隐私安全',
        '其他问题'
      ],
      selectedType: -1,
      content: '',
      images: [],
      contact: ''
    }
  },
  computed: {
    vuex_custom_bar_height() {
      return uni.getSystemInfoSync().statusBarHeight + 45
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    selectType(index) {
      this.selectedType = index
    },
    chooseImage() {
      uni.chooseImage({
        count: 3 - this.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.images = [...this.images, ...res.tempFilePaths]
        }
      })
    },
    deleteImage(index) {
      this.images.splice(index, 1)
    },
    submitFeedback() {
      if (this.selectedType === -1) {
        uni.showToast({
          title: '请选择问题类型',
          icon: 'none'
        })
        return
      }
      if (!this.content.trim()) {
        uni.showToast({
          title: '请描述您的问题',
          icon: 'none'
        })
        return
      }
      
      // 这里添加提交逻辑
      uni.showLoading({
        title: '提交中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 2000)
          }
        })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.template-feedback {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.feedback-content {
  padding: 30rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
  
  .tn-icon-mobile {
    color: #666;
    font-size: 32rpx;
  }
}

.type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .type-item {
    padding: 20rpx 30rpx;
    background-color: #FFFFFF;
    border-radius: 12rpx;
    border: 2rpx solid #eee;
    
    &.active {
      background-color: rgba(255, 129, 85, 0.1);
      border-color: #FF8155;
      color: #FF8155;
    }
  }
}

.input-area {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 20rpx;
  
  .feedback-textarea {
    width: 100%;
    height: 300rpx;
    font-size: 28rpx;
    line-height: 1.8;
  }
  
  .word-count {
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    font-size: 24rpx;
    color: #999;
  }
}

.upload-area {
  .image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .image-item, .upload-btn {
      width: 200rpx;
      height: 200rpx;
      background-color: #FFFFFF;
      border-radius: 12rpx;
      overflow: hidden;
    }
    
    .image-item {
      position: relative;
      
      image {
        width: 100%;
        height: 100%;
      }
      
      .delete-btn {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
      }
    }
    
    .upload-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2rpx dashed #ddd;
      color: #999;
      font-size: 60rpx;
    }
  }
  
  .tip-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 20rpx;
  }
}

.contact-input {
  width: 100%;
  min-height: 80rpx;
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  font-size: 28rpx;
  margin-top: 20rpx;
  box-sizing: border-box;
  border: none;
}

.contact-input::placeholder {
  color: #999;
}

.contact-input:focus {
  background-color: #f0f0f0;
  outline: none;
}

.submit-btn-wrap {
  margin-top: 60rpx;
  padding: 0 40rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  color: #FFFFFF;
  border: none;
  
  &:active {
    transform: scale(0.98);
  }
}

.tn-custom-nav-bar__back {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 30rpx;
  
  .icon {
    font-size: 46rpx;
    color: #000000;
    
    &:active {
      transform: scale(0.92);
    }
  }
}
</style> 